<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距 margin属性:【微调：文字或图片】
			   margin使用问题：1.自适应居中，建议使用div，套块元素、行内块元素、行内元素
			                  2.行元素，加上下 右左外边距---
							           不可设置高宽【高---不可以动上下】、在一行显示【宽---可以左右】
							  3.垂直外边距
							  4.
			 */
			img{
				border: 1px solid firebrick;
				/* margin：1个属性值  顺时针 上 右 下 左 */
				margin: 100px;
				/* margin：2个属性值  顺时针 上下 右左 */
				margin: 100px 200px;
				/* 常用：盒子自适应居中 --- 失效
				        行内块：可以设置高宽，在一行显示，无法居中
				        margin使用问题：1.自适应居中，必须设置宽度
				 */
				margin: 0 auto;
				/* margin：3个属性值  顺时针 上 右左 下 */
				marg in: 100px 200px 300px;
				/* margin：4个属性值  顺时针 上 右 下 左 */
				marg in: 100px 200px 300px 400px;
			}
			h1{
				/* 块元素：可以设置高宽，不在一行显示，无法居中，内质元素
				   text-align:center
				 */
				/* 常用：盒子自适应居中 -- 设置宽度 */
				width: 100%;
				border: 1px solid red;
				margin: 1000px 200px;
			}
			span{
				/* 行元素：不可以设置高宽【不可以动上下】，在一行显示，无法居中，内置文字
				   text-align:center
				 */
				/* 常用：盒子自适应居中 -- 设置宽度 */
				width: 100%;
				border: 1px solid red;
				margin: 100px 200px;
			}
			
			div{
				width: 200px;
				height: 200px;
				background: crimson;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div></div>
		
		<!-- 框模型/盒子模型：四个部分组成：外边距——边框以外的四周
		                                         margin属性
		                                 边框——
										 内边距——边框以内与内容之间的距离
										 内容——块、行、行内元素本身宽高
		     所有元素存在于框模型中
		  -->
		<h1>块级元素</h1>
		<img src="img/圣诞树.png" width="300px" height="450px" alt="圣诞" />
		<span>行内元素：圣诞</span>
	</body>
</html>